<!-- src/test/VeeValidateDemoThree.vue -->
<script setup lang="ts">
import { toFormValidator } from "@vee-validate/zod";
import * as zod from "zod";
import { Field, ErrorMessage } from "vee-validate";

const validationSchema = toFormValidator(
  zod.object({
    users: zod.array(
      zod.object({
        username: zod
          .string({
            required_error: "请输入用户名",
            invalid_type_error: "用户名类型错误",
          })
          .min(2, { message: "用户名长度不能小于2" })
          .max(16, { message: "用户名长度不能大于16" }),
        password: zod
          .string({
            required_error: "请输入用密码",
            invalid_type_error: "密码类型错误",
          })
          .regex(/^\w{6,24}$/, "密码是6-24个字符"),
      })
    ),
  })
);
const { handleSubmit, handleReset, setFieldValue } = useForm({
  validationSchema: validationSchema,
  initialValues: {
    users: [{ username: "11", password: "22333333" }],
  },
});
const { remove, push, fields } = useFieldArray<{
  username: string;
  password: string;
}>("users");
const onSubmit = handleSubmit((values) => {
  console.log(values);
});
</script>
<template>
  <!--
    Form 组件默认被渲染成 form 标记
    通过 as 属性可以更改为其他标记
  -->

  <form class="container mt-6" @submit.prevent="onSubmit">
    <template v-for="(item, idx) in fields" :key="item.key">
      <!-- 
      Field 组件默认不被渲染成标记
      通过 as 属性可以指定 Field 组件被渲染成什么标记
    -->
      <Field
        :name="`users[${idx}].username`"
        class="field"
        as="div"
        v-slot="{ field }"
        :validateOnInput="true"
      >
        <label class="label">用户名</label>
        <div class="control has-icons-left">
          <input
            class="input"
            v-bind="field"
            type="text"
            placeholder="请输入用户名"
          />
          <span class="icon is-small is-left">
            <i class="fas fa-user"></i>
          </span>
        </div>
        <ErrorMessage :name="`users[${idx}].username`" v-slot="{ message }">
          <p class="help is-danger">{{ message }}</p>
        </ErrorMessage>
      </Field>
      <Field
        :validateOnInput="true"
        :name="`users[${idx}].password`"
        class="field"
        as="div"
        v-slot="{ field }"
      >
        <label class="label">密码</label>
        <div class="control has-icons-left">
          <input
            v-bind="field"
            class="input"
            type="password"
            placeholder="请输入密码"
          />
          <span class="icon is-small is-left">
            <i class="fas fa-key"></i>
          </span>
        </div>
        <ErrorMessage :name="`users[${idx}].password`" v-slot="{ message }">
          <p class="help is-danger">{{ message }}</p>
        </ErrorMessage>
      </Field>
      <div class="field">
        <div class="control">
          <button @click="remove(idx)" type="button" class="button is-danger">
            删除
          </button>
        </div>
      </div>
      <div class="control">
        <button
          @click="
            setFieldValue('users', [
              { username: '李四', password: '11111111111' },
            ])
          "
          type="button"
          class="button is-link is-light"
        >
          设置表单值
        </button>
      </div>
    </template>

    <div class="field is-grouped">
      <div class="control">
        <button type="submit" class="button is-link">提交</button>
      </div>
      <div class="control">
        <button
          type="button"
          class="button is-link is-light"
          @click="handleReset"
        >
          重置
        </button>
      </div>
      <div class="control">
        <button
          type="button"
          @click="push({ username: '', password: '' })"
          class="button is-link is-light"
        >
          添加
        </button>
      </div>
    </div>
  </form>
</template>

<style lang="less" scoped>
@import "https://bulma.io/vendor/fontawesome-free-5.15.2-web/css/all.min.css";
@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";
</style>
